window.onload = function (){
//  属性的访问 ：
//      HTML标签是在浏览器解析时生成一个与之对应的JS DOM对象，
//      在js操作过程中，对js DOM 对象的修改，会被浏览器直接渲染到页面
//      由此形成了 html 和 js 的关联关系
//      1. HTML属性 ：页面标签定义的相关属性
//      2. DOM属性 ：浏览器在解析标签时生成的JS DOM 对象内置的属性
//      => w3c 规范的HTML属性基本都会和JS DOM对象的属性存在一定关联关系
//     例如 ： html               dom
//              class               className|classList
//              style               style
//              checked             checked
//              selected            selected
//              ……

//    1. html 属性的操作
//       标签的html属性是被统一存放在对应DON的 attributes属性中
//          + getAttribute("属性名") 取值HTML属性
//          + setAttribute("属性名",属性值) 赋值HTML属性
    let h1Dom = document.querySelector("#h1Dom");
    console.log( h1Dom.getAttribute("itany") )
    h1Dom.setAttribute("itany","网博")
//    访问范围是所有属性
    console.log( h1Dom.getAttribute("class") )
    // h1Dom.setAttribute("class","c d e f")
    console.log( h1Dom.getAttribute("id") )

//    2. DOM 的属性操作
//          1. 其实就是 JS 对象属性的访问 => 对象名.属性值 || 对象名["属性名"]
//          2. 其实就是 JS 对象属性的赋值 => 对象名.属性名 = 值 || 对象名["属性名"] = 值
//          3. js DOM对象因为其特殊性，存在大量的只读属性
//          4. js DOM对象中存在一些具有固定规则的，对应HTML标签的属性，必须遵守固定的规则
    console.log( h1Dom.className )
    console.log( h1Dom.classList )
    // html class => js className 的属性操作
    // h1Dom.className = h1Dom.className+"c";
    // h1Dom.className = h1Dom.className+" c";
    // w3c完成html属性和DOM属性的关联，不仅仅是属性关联，还包含JS功能关联
    //      => 结合JS规则提供简单操作方案(原型方法)
    // h1Dom.classList = h1Dom.classList + "c"
    // 新样式添加
    h1Dom.classList.add("c");
    // 样式移除
    h1Dom.classList.remove("b");
    // 当 a 样式存在时删除，当 a 样式不存在时添加
    h1Dom.classList.toggle("a")
    //  特殊属性 style 的DOM操作
    let h2Dom = document.querySelector("#h2Dom")
    // style 属性获取的是html标签所能够使用的所有样式对象列表
    //       多数样式以 ”“ 作为默认值存在，被修改的样式以增量方式完成样式重写
    console.log( h2Dom.style );
    // 单一样式获取或赋值 => dom对象.style.样式名 || dom对象.style["样式名"]
    console.log( h2Dom.style.color )
    h2Dom.style.color = "blue";
    // 因为语法规范不同，css样式对于多单词样式名使用的是连字符，js建议的语法是小驼峰
    // 所以对应关系中，所有css多单词连字符样式需要转换为小驼峰规则
    // console.log( h2Dom.style.fontWeight )
    // h2Dom.style.fontWeight = "normal";
    // 后续规则更新中，为了方便记忆和理解，可以采用 [] + 连字符样式取值和修改
    console.log( h2Dom.style["font-weight"] )
    h2Dom.style["font-weight"] = "normal";
    // style 对象中存在一个非样式的属性  cssText
    // cssText 以文本方式获取标签style的完整文本样式取值
    console.log( h2Dom.style.cssText )

    // js DOM对的boolean类型属性操作
    //     boolean类型 html 属性在JS dom 对象中依然保持 boolean 类型，取值赋值规则不变
    //     但值必须为 boolean 结果 [ true|false ]
    let inputDom = document.querySelector("#inputDom");
    console.log( inputDom.disabled )
    // inputDom.disabled = true;
    // 如果取值为非boolean值,会触发JS的自动类型转换
    inputDom.disabled = "aaa";


}

function changeH1DomClass(){
    let h1Dom = document.querySelector("#h1Dom")
    h1Dom.classList.toggle("c")
}